iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
1
Modern Web

Hugo 貼身打造個人部落格系列 第 1

Day 01. Hugo 是什麼

  • 分享至 

  • xImage
  •  

前言

在介紹什麼是 Hugo 之前,我想先對 Hugo 做一些描述,讓我們先有個初步印象:

  • A Framework, 一種框架工具
  • It's open-source, 開放原始碼
  • A static site generator written in Go, 靜態網頁生成器,或稱靜態站點產生器,用 Go 寫的
  • Build a site easily and quickly by yourself, 你可以輕鬆迅速的構建自己的網站
  • Hugo 是基於 JAM stack 來建置網站的

簡介

在官方網站的首頁上大大的寫著「The world’s fastest framework for building websites」,我認為除了指網站打包的速度 之外,還有從無到有做一個網站的速度

靜態網頁生成器可以幫我們快速的在自己的電腦構建一個網站雛形,透過官方上提供的各種佈景,選擇一個與自己想像中網站相近的主題、喜歡的格局,然後跟著官方的指示「快速開始」,幾分鐘內就可以做出一個網站。

靜態資源打包速度方面,可參考以下 Build Time 比較表 (出處)

Generator 10 100 1,000 10,000
Hugo 0.05s 0.08s 0.34s 2.95s
Jekyll 1.47s 3.3s 14.38s 187.15s

可以看到生成 10,000 個頁面兩者速度差了 63 倍。

靜態網頁 vs 動態網頁

粗淺來說,靜態網頁是透過工具編譯生成,部署後可被瀏覽器直接存取,不再需要依靠與後端伺服器交互、動態渲染頁面資料;這樣不僅更快速,也更安全,若你有興趣查閱更多兩者之間有何不同,可以 google 這類關鍵字 Static vs Dynamic Website

門檻

這類工具在官方文件說明下幾乎不需要先學會寫程式就能使用,當然如果要更深入做應用就另當別論,以我自己來說,我本身主要寫 PHP,也用過 Vue,但我沒用過、寫過 golang 相關應用,若你會使用終端機下指令 (我使用 Mac),甚至會一點 HTML、CSS,接下來的 30 天文章內容都不會有太大問題。

小結

第一天就先簡單帶過 Static Site Generator,還有很多此類工具如 Jekyll, Docsify, Vuepress, Hexo, MkDocs,這些同樣都是靜態網頁生成器,這邊就不一一列舉。

另外,還有許多線上服務,如痞客邦、探路客、Medium、Matters,都可以做到「擁有一個寫文環境」這件事,但因為靜態網頁生成器有更多的彈性,所以我選擇自己架;明天會聊聊線上平台與自架環境的差異,以及為什麼我選擇使用 Hugo。

題外話

這是我第二次嘗試架設部落格(第一次用 Hexo),三年前我曾想要自己弄一個寫文環境,但因為當時還處於「 I have no idea」關於怎麼開始,且我沒有很有概念要如何去使用,有點摸不著要領,期間也使用過線上服務,寫了幾篇文章,不過使用上總是覺得少了點什麼;三年後的現在,我比較清楚我想要的網站樣子,比起以前也多了點想法,因此重啟架設部落格這件事,順便學點東西。

參考連結


下一篇
Day 02. 為什麼我選擇使用 Hugo 自架部落格
系列文
Hugo 貼身打造個人部落格30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kkdayy_55330
iT邦新手 5 級 ‧ 2020-09-23 12:39:06

嗨你好,請問後續會介紹到部署的部分嗎?

謝謝!

Hello 你好,計畫中是會的,預計是下禮拜會寫哦

我要留言

立即登入留言